<script setup>
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
import GoodsItem from '@/views/home/components/GoodsItem.vue'
import HomePanel from '@/views/home/components/HomePanel.vue'
import { ref,onMounted } from 'vue';
import { getCategoryAPI } from '@/apis/category';
import { useCategoryStore } from '@/stores/category'

  const categoryStore = useCategoryStore()

  const route = useRoute()
  const categoryInfo = ref({})
  const books = ref([])
  // 根据分类获取数据
  const getBooksByCategory = async (id) =>  {
    const res = await getCategoryAPI(id)
    books.value = res.result
      //获取分类名称
    const category = categoryStore.categoryList.find(item => item.id === Number(id))
    categoryInfo.value = category
    // 使用 forEach 方法为每个对象添加 name 属性
    // books.value.forEach(book => {
    //   book.name = categoryStore.categoryList.find(item => item.id === book.type).name; // 你可以根据需要设置具体的名称
    // });

  }

  onBeforeRouteUpdate((to)=>{
    getBooksByCategory(to.params.id)
  })

  onMounted(() => {
    getBooksByCategory(route.params.id)

  })

</script>

<template>
  <div class="top-category">
    <div class="container m-top-20">
      <!-- 面包屑 -->
      <div class="bread-container">
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{ categoryInfo?.name }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="home-product">
        <HomePanel :title="categoryInfo.name" :subtitle="categoryInfo.subTitle" >
            <template #main>
              <div class="box">
                <ul class="goods-list">
                  <li v-for="book in books" :key="book.id">
                    <RouterLink :to="`/detail/${book.id}`">
                      <GoodsItem :good="book"/>
                    </RouterLink>
                  </li>
                </ul>
              </div>
            </template>
        </HomePanel>
      </div>
    </div>
  </div>
</template>


<style scoped lang="scss">
.home-product {
  background: #fff;
  margin-top: 20px;
  padding:0 20px;
  .sub {
    margin-bottom: 2px;

    a {
      padding: 2px 12px;
      font-size: 16px;
      border-radius: 4px;

      &:hover {
        background: $xtxColor;
        color: #fff;
      }

      &:last-child {
        margin-right: 80px;
      }
    }
  }

  .box {
    display: flex;

    .cover {
      width: 240px;
      height: 610px;
      margin-right: 10px;
      position: relative;

      img {
        width: 100%;
        height: 100%;
      }

      .label {
        width: 188px;
        height: 66px;
        display: flex;
        font-size: 18px;
        color: #fff;
        line-height: 66px;
        font-weight: normal;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate3d(0, -50%, 0);

        span {
          text-align: center;

          &:first-child {
            width: 76px;
            background: rgba(0, 0, 0, 0.9);
          }

          &:last-child {
            flex: 1;
            background: rgba(0, 0, 0, 0.7);
          }
        }
      }
    }

    .goods-list {
      display: flex;
      flex-wrap: wrap;

      li {
        width: 240px;
        height: 300px;
        margin-right: 10px;
        margin-bottom: 10px;

        &:nth-last-child(-n + 4) {
          margin-bottom: 0;
        }

        &:nth-child(4n) {
          margin-right: 0;
        }
      }
    }


  }
}
.top-category {
  h3 {
    font-size: 28px;
    color: #666;
    font-weight: normal;
    text-align: center;
    line-height: 100px;
  }

  .sub-list {
    margin-top: 20px;
    background-color: #fff;

    ul {
      display: flex;
      padding: 0 32px;
      flex-wrap: wrap;

      li {
        width: 168px;
        height: 160px;


        a {
          text-align: center;
          display: block;
          font-size: 16px;

          img {
            width: 100px;
            height: 100px;
          }

          p {
            line-height: 40px;
          }

          &:hover {
            color: $xtxColor;
          }
        }
      }
    }
  }

  .ref-goods {
    background-color: #fff;
    margin-top: 20px;
    position: relative;

    .head {
      .xtx-more {
        position: absolute;
        top: 20px;
        right: 20px;
      }

      .tag {
        text-align: center;
        color: #999;
        font-size: 20px;
        position: relative;
        top: -20px;
      }
    }

    .body {
      display: flex;
      justify-content: space-around;
      padding: 0 40px 30px;
    }
  }

  .bread-container {
    padding: 25px 0;
  }
}

.category-banner {
  width: 1240px;
  height: 500px;

  img {
    width: 100%;
    height: 500px;
  }
}
</style>
